<template>
<div class="pie-container d-b-s d-c">
    <div class="ww100 d-b-c lh30">
      <span class="f16">{{$t('statistics.conversion_rate')}}</span>
      <el-select
        size="mini"
        v-model="selectDay"
        @change="changeFunc"
        :placeholder="$t('statistics.please_select')"
      >
        <el-option
          v-for="item in days"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="ww100">
      <div class="Echarts"><div id="PieBox" class="ww100"></div></div>
    </div>
    <div></div>
  </div>
</template>

<script>
import StatisticsApi from "@/api/statistics.js";
import * as echarts from "echarts";
let myChart;
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*天数*/
      days: [{
        label: $t("statistics.today_label"),
        value: 1
      }, {
        label: $t("statistics.last_7_days_label"),
        value: 7
      }, {
        label: $t("statistics.last_30_days_label"),
        value: 30
      }, {
        label: $t("statistics.last_90_days_label"),
        value: 90
      }, {
        label: $t("statistics.last_180_days"),
        value: 180
      }, {
        label: $t("statistics.last_1_year"),
        value: 365
      }, {
        label: $t("statistics.last_2_years"),
        value: 730
      }, {
        label: $t("statistics.overall_ratio"),
        value: 0
      }],
      /*选择的天数*/
      selectDay: 7,
      /*数据对象*/
      payScale: {},
      /*图表对象*/
      // myChart: null,
      /*图表配置*/
      option: {
        title: {
          text: "",
          subtext: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        }
      }
    };
  },
  mounted() {
    this.myEcharts();
  },
  methods: {
    /*选择天数*/
    changeFunc() {
      this.getData();
    },
    /*创建图表对象*/
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      myChart = echarts.init(document.getElementById("PieBox"));
      this.getData();
    },
    /*格式数据*/
    createOption() {
      if (!this.loading) {
        this.option.color = ["#e2e7f2", "#409EFF"];
        this.option.legend = {
          orient: "vertical",
          left: "left",
          data: [{
            name: $t("statistics.converted_members"),
            color: "#666"
          }, {
            name: $t("statistics.unconverted_members"),
            color: "#666"
          }]
        };
        this.option.series = [{
          name: $t("statistics.conversion_rate"),
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [{
            value: this.payScale.no_pay,
            name: $t("statistics.unconverted_members")
          }, {
            value: this.payScale.pay,
            name: $t("statistics.converted_members")
          }],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }];
        myChart.setOption(this.option);
        myChart.resize();
      }
    },
    /*获取数据*/
    getData() {
      let self = this;
      StatisticsApi.getUserScale({
        day: self.selectDay
      }, true).then(res => {
        self.payScale = res.data;
        self.loading = false;
        self.createOption();
      }).catch(error => {});
    }
  }
};
</script>

<style scoped="scoped">
.pie-container {
  padding: 10px 20px;
  width: 30%;
  box-sizing: border-box;
}
.Echarts > div {
  height: 400px;
}
</style>

